Ajax({
    url: 'http://localhost:3000/toplist',
    params: {

    },
    type: 'get',
}).then(function (res) {
    // console.log(res.list[0]);
    const lis = document.querySelector('#musicLis');
    let item = res.list;
    let str = '';
    for (var i = 0; i < res.list.length; i++) {
        str += `
        <li data-src="${item[i].id}">
        <img src="${item[i].coverImgUrl}" alt="" >
        <span>
            <p>${item[i].name}</p>
            <p>${item[i].updateFrequency}</p>
        </span>
    </li>`;
    }
    lis.innerHTML = str;
    const li = document.querySelectorAll('#musicLis li');
    var id = li[0].dataset.src;

    // 单次获取第一次的数据
    Ajax({
        url: 'http://localhost:3000/playlist/detail',
        params: {
            id: id,
        },
        type: 'get',
    }).then(function (res) {

        // console.log(res.playlist);
        let tpl = template('tpl', {
            data: res.playlist
        });
        const top = document.querySelector("#top");
        top.innerHTML = tpl;
        function formate (dateTime, ...values) {
            // console.log([...values]);
            let arr = [...values];
            const se = Math.floor(arr[0] / 1000);
            const minute = Math.floor(se / 60);
            const sec = (se % 60);
            let second;
            let formatMiu;
            formatMiu = minute < 10 ? '0' + minute : minute;
            second = sec < 10 ? '0' + sec : sec;
            return formatMiu + ":" + second
        }
        // 获取歌曲列表
        // console.log(res);
        var songs = res.playlist.tracks;
        var songsId = res.playlist.trackIds;
        let songStr = '';
        Array.from(songs).forEach(function (item, index) {
            let value = item.dt;
            let str = formate `${value}`;
            songStr += `
                <tr>
                    <td>${index + 1}</td>
                    <td>${index > 3 ? '' : `<img src=${item.al.picUrl}></img>`}</td>
                    <td>
                   <span class="playerS"><span class="iconfont icon-zengjiatianjiajiahao  playIcons" 
                    style="margin-right: 10px;font-size: 18px;color: #227274!important" data-set=${songsId[index].id}></span>
                     <a href="./audio.html" style="color: #227274!important" class="modLinks" data-set=${songsId[index].id}>${item.name}</span></a>
                    </td>
                    <td>
                        <span>${str}</span> 
                    </td>
                    <td>
                        ${item.ar[0].name}
                    </td>
                </tr>
            `;
        });
        let strHead = `
        <th></th>
        <th>部分图片</th>
        <th>标题</th>
        <th>时长</th>
        <th>歌手</th>`;
        strHead += songStr;
        const songsLisAll = document.querySelector('#songsLisAll');
        songsLisAll.innerHTML = strHead;

        songsLisAll.addEventListener('click', function (evt) {
            // console.log(evt.target)
            evt.target.href = evt.target.href + "?" + evt.target.dataset.set;
            
        })
        const playIcons = document.querySelectorAll('.playIcons');
        // console.log(playIcons)
        playIcons.forEach(function (item, index) {
            item.addEventListener('click', function (evt) {
                idX.push(evt.target.dataset.set)
                $('#myModal').modal();

            })
        })

    })
    // 循环绑定点击事件，进行数据获取展示
    li.forEach(function (item, index) {
        // console.log(item)
        // console.log(this)
        item.addEventListener('click', function (evt) {
            var id = item.dataset.src;
            Ajax({
                url: 'http://localhost:3000/playlist/detail',
                params: {
                    id: id,
                },
                type: 'get',
            }).then(function (res) {
                // console.log(res.playlist);
                let tpl = template('tpl', {
                    data: res.playlist
                });
                const top = document.querySelector("#top");
                top.innerHTML = tpl;

                // 获取歌曲列表
                // console.log(res);
                var songs = res.playlist.tracks;
                var songsId = res.playlist.trackIds;
                let songStr = '';
                function formate (dateTime, ...values) {
                    // console.log([...values]);
                    let arr = [...values];
                    const se = Math.floor(arr[0] / 1000);
                    const minute = Math.floor(se / 60);
                    const sec = (se % 60);
                    let second;
                    let formatMiu;
                    formatMiu = minute < 10 ? '0' + minute : minute;
                    second = sec < 10 ? '0' + sec : sec;
                    return formatMiu + ":" + second
                }
                Array.from(songs).forEach(function (item, index) {
                    // console.log(item.dt)
                    let value = item.dt;
                    let str = formate `${value}`;
                    // console.log(str);
                    songStr += `
                <tr>
                    <td>${index + 1}</td>
                    <td>${index > 3 ? '' : `<img src=${item.al.picUrl}></img>`}</td>
                    <td>
                    <span class="playerS"><span class="iconfont icon-zengjiatianjiajiahao playIcons" 
                    style="margin-right: 10px;font-size: 18px;color: #227274!important" data-set=${songsId[index].id}></span>
                     <a href="./audio.html" style="color: #227274!important" class="modLinks" data-set=${songsId[index].id}>${item.name}</span></a>
                       
                    </td>
                    <td>
                        <span>${str}</span> 
                    </td>
                    <td>
                        ${item.ar[0].name}
                    </td>
                </tr>
            `;
                });
                let strHead = `
                    <th></th>
                    <th>部分图片</th>
                    <th>标题</th>
                    <th>时长</th>
                    <th>歌手</th>`;
                strHead += songStr;

                const songsLisAll = document.querySelector('#songsLisAll');
                songsLisAll.innerHTML = strHead;

                songsLisAll.addEventListener('click', function (evt) {
                    evt.href = evt.href + "?" + evt.target.dataset.set;
                })
                const playIcons = document.querySelectorAll('.playIcons');
                // console.log(playIcons)
                playIcons.forEach(function (item, index) {
                    item.addEventListener('click', function (evt) {
                        // console.log(evt.target.dataset.set);
                        idX.push(evt.target.dataset.set);
                        $('#myModal').modal();
                    })
                })
            })
            $('body,html').animate({
                scrollTop: 0
            }, 20);

        })
    }, li);
});